<template>
	<view class="content">
		<view class="top">
			<view class="header">
				<view class="hl">
					<picker mode="selector" :range="columns" @change="pickChange">
						<view class="picker-box">
							我的{{ columns[index] }}分销数据
							<image src='/static/xiaWhite.png' class="icon-xia"></image>
						</view>
					</picker>
				</view>
			<!-- 	<view class="hr">
					<view>去提现</view>
					<image src="/static/youWhite.png" class="icon-xia"></image>
				</view> -->
			</view>
			<!-- 中 -->
			<view class="body">
				<!-- 订单 -->
				<view class="bl">
					<view class="btext">订单数</view>
					<view class="bnum">{{allOrders.length}}</view>
				</view>
				
				
				<!-- 收益 -->
				<view class="br">
					<view class="btext">累计收益</view>
					<view class="bnum">¥{{all.totalDistributorAmount || 0}}</view>
				</view>
				<view class="br">
					<view class="btext">
						<view>待入账</view>
					</view>
					<view class="bnum">¥{{all.pendingAmount || 0}}</view>
				</view>
			
			</view>
		</view>
		
		<!-- 下 -->
		<view class="bottom">
			<view class="orders">
				<view class="good" v-for="(order,idx) in allOrders" :key="idx">
					<view class="good-head">
						<view class="good-code">订单编号：{{order.orderNumber}}</view>
					</view>
					<view class="zhongjian">
						<view class="zj-left">
							<view class="good-info">下单用户：{{order.customerName}}</view>
							<view class="good-info">支付金额：¥{{order.totalAmount}}</view>
							<view class="good-info">完成时间：{{order.orderTime}}</view>
						</view>
						<view class="zj-right">
							+{{order.distributorAmount}}
						</view>
					</view>
				</view>
			</view>
				
		</view>
	</view>
</template>

<script setup>

	import {
		ref,
		computed,
		onMounted,
		watch,
		
	} from 'vue'
	import { onLoad,onUnload } from '@dcloudio/uni-app'
	import { orderfenxiao,fetchFenxiao} from '../../api/fenxiao'
	const columns = ['今日', '近7天', '近30天']
	const dateMap = ['today', 'recent7days', 'recent30days'] 
	const allOrders = ref([])
	const all = ref([])
	const index = ref(0)
	const pickChange = e => {
		index.value = e.detail.value
		fetchData()
	}
	async function fetchData() {
	  const type = dateMap[index.value]
	  // const res = await fetchFenxiao({ shopId: 1, dateRangeType: type })
	  const res = await fetchFenxiao({  dateRangeType:type,showPending:false })
	  all.value = res.data
	  allOrders.value = res.data.orders
	  console.log('分销接口返回的：',allOrders.value)
	}
	
	
	

	
	
	

	const previewImages = (imgs) => {
	  wx.previewImage({
	    current: imgs[0],        // 首张
	    urls: imgs               // 全部
	  })
	}
	const refresh = ()=>{
		uni.startPullDownRefresh()
	}
	onMounted(async() => {
		
		// allOrders.value = orderfenxiao
		await fetchData()
	})
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #55aa7f;
		
		/* background-color: #f1f2f3; */
	}
	.header{
		width:95%;
		height:100rpx;
		display: flex;
		background-color: #55aa7f;
		margin-bottom: 20rpx;
		
	}
	.top{
		width:100%;
		height:auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #55aa7f;
	}
	.hl{
		display: flex;
		margin-left: 20rpx;
		margin-bottom: 50rpx;
	}
	.icon-shuaxin{
		width:40rpx;
		height:40rpx;
	}
	.icon-xia{
		width:30rpx;
		height:20rpx;
		margin-left: 10rpx;
	}
	.icon-you{
		width:30rpx;
		height:30rpx;
	}
	.picker-box {
		padding: 10rpx;
		color:white;
	}
	.body{
		display: flex;
		width:90%;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}
	.body::after{
		background-color: #007AFF;
	}
	.bl,.br{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.bnum{
		font-size: large;
		font-weight: 550;
		margin: 30rpx 0;
		color:white;
	}
	.btext{
		color: #dfe7e6;
		display: flex;
		line-height: 30rpx;
	}
/* 	.bbutton{
		width:auto;
		padding:5rpx 10rpx;
		background-color: #e5e5e5;
		border:solid 1rpx #878787;
		border-radius: 15rpx;
	} */
	.bottom{
		flex: 1;
	/* 	border: solid 1rpx #007AFF; */
		display: flex;
		flex-direction: column;
		align-items: center;
		width:100%;
		margin-bottom: 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: white;
	}
	.orders{
		width:96%;
		height:100%;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		padding-top: 20rpx;
	}
	::-webkit-scrollbar {
		  display: none; /* 隐藏滚动条 */
		  width: 0; /* 设置滚动条宽度为 0 */
		  height: 0; /* 设置滚动条高度为 0 */
		  background: transparent; /* 设置滚动条背景透明 */
		}
	
	.good {
		display: flex;
		flex-direction: column;
		height:auto;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(47, 47, 47, 0.0);
	}
	.zhongjian{
		width:100%;
		display: flex;
		height:auto;
	}
	.zj-right{
		width:150rpx;
		height:150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: x-large;
		color:green;
	}
	.swiper { width: 100%; height: 100%; }
	.slide-img { width: 100%; height: 100%; border-radius: 8rpx; }
		
	.zj-left{
		flex:1
	}
	
	.good-code,
	.good-info {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}
	.good-code{
		font-weight: 550;
	}
		
	.good-head{
		border-bottom: #d5e6fd solid 1rpx;
		line-height: 50rpx;
		margin-bottom: 18rpx;
		display: flex;
		width:100%;
	}
	.good-code{
		flex:1;
	}
</style>